<template>
  <div class="anTimeRank">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Blog_Analysis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Blog_Analysis</el-breadcrumb-item>
        <el-breadcrumb-item>AnTimeRank</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="one"></div>
      <div id="two"></div>
      <div id="three"></div>
      <div id="four"></div>
    </div>

    <div style="margin-top: 20px;">
      <h1 style="text-align: center;">关于掘金用户，创作时间数据分析：</h1>
      
        <h2>结论与建议</h2>
        <h3>周数据分析：</h3>
        <p>

掘金博客作为国内知名的技术博客平台，吸引了大量技术爱好者和专业人士。为了更好地了解用户在掘金博客上的活跃情况，我们对一周七天内的用户写作数据进行了统计分析。

从数据中可以看出，周一至周四的用户写作量相对较高，分别为1923篇、1856篇、1813篇和1802篇。这表明用户在这几天比较活跃，可能是由于工作日的缘故，用户有更多的时间和精力进行写作。

相比之下，周五、周六和周日的写作量有所下降，分别为1747篇、1187篇和1188篇。这可能是因为用户在这几天处于休息或放松状态，参与写作的意愿降低。

为了更好地提升用户体验和鼓励用户创作，我们可以考虑在周五、周六和周日推出一些特别的活动或激励措施，以吸引用户参与写作。此外，我们还可以根据用户在不同时间段的活跃情况，合理安排博客平台的内容推送和更新频次，以满足用户的需求。

总之，通过对一周七天用户写作数据的统计分析，我们可以更好地了解用户的活动规律和习惯，为平台的运营和发展提供有益的参考。

        </p>
        <h3>小时数据分析：</h3>
        <p>
          掘金博客在24小时内，用户的写作活跃度呈现了一定的规律性。为了更好地了解这一规律，我们对24小时内的用户写作数据进行了统计分析。

从数据中可以看出，大部分用户选择在上午和下午进行写作，而在深夜和凌晨的写作量较少。具体而言，上午8点至11点以及下午2点至5点的写作量较高，分别为1013篇、1070篇、652篇、466篇和519篇。这表明用户在工作日白天比较活跃，可能是由于工作或学习的原因，用户在此时段有更多的时间和精力进行创作。

而在深夜和凌晨，写作量明显下降。具体而言，凌晨1点至4点的写作量分别为858篇、888篇、797篇和421篇，呈现逐渐下降的趋势。这可能是因为用户在此时段处于休息状态，参与写作的意愿较低。

为了更好地提升用户体验和鼓励用户创作，我们可以考虑在上午和下午推出一些特别的活动或激励措施，以吸引用户参与写作。此外，我们还可以根据用户在不同时段的活跃情况，合理安排博客平台的内容推送和更新频次，以满足用户的需求。

总之，通过对24小时内用户写作数据的统计分析，我们可以更好地了解用户的活动规律和习惯，为平台的运营和发展提供有益的参考。同时，也为用户提供了更好的内容和服务，促进了社区的活跃和发展。  
        </p>


        <div style="height: 100px;width: 200px;"></div>
    </div>


  </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      week_bar_chartDome: null,
      week_bar_myChart: null,
      week_bar_option: null,

      week_pie_chartDome: null,
      week_pie_myChart: null,
      week_pie_option: null,

      hour_bar_chartDome: null,
      hour_bar_myChart: null,
      hour_bar_option: null,

      hour_pie_chartDome: null,
      hour_pie_myChart: null,
      hour_pie_option: null,

      week_bar_xAxis: {
        type: 'category',
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },
      week_bar_data: [],
      week_pie_data: [],
      hour_bar_xAxis: {
        type: 'category',
        data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点'],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },
      hour_bar_data: [],
      hour_pie_data: []
    }
  },
  mounted() {
    this.getTimeRank()
    // this.draw_week_bar()
    // this.draw_hour_bar()
    // this.draw_week_pie()
    // this.draw_hour_pie()
  },
  methods: {
    getTimeRank() {
      // http://127.0.0.1:8888/timeRank
      this.$http({
        url: '/timeRank',
        method: 'post'
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取时间分布数据失败')
        } else {
          // 处理数据

          // 周
          var week_keys = Object.keys(res.data.data.weekdaysDict)
          week_keys.forEach(item => {
            // console.log(item + " : " + res.data.data.weekdaysDict[item])
            this.week_bar_data.push(res.data.data.weekdaysDict[item])
            let temp_pie_item = { "value": res.data.data.weekdaysDict[item], "name": item }
            this.week_pie_data.push(temp_pie_item)
          })

          // 小时
          var hour_keys = Object.keys(res.data.data.hoursDict)
          hour_keys.forEach(item => {
            // console.log(item + " : " + res.data.data.hoursDict[item])
            this.hour_bar_data.push(res.data.data.hoursDict[item])
            let temp_pie_item = { "value": res.data.data.hoursDict[item], "name": item }
            this.hour_pie_data.push(temp_pie_item)
          })

          // 处理完数据再绘图
          this.draw_week_bar()
          this.draw_hour_bar()
          this.draw_week_pie()
          this.draw_hour_pie()

        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 星期柱状图 one
    draw_week_bar() {
      this.week_bar_chartDome = document.getElementById('one');
      this.week_bar_myChart = echarts.init(this.week_bar_chartDome);

      this.week_bar_option = {
        title: {
          show: true,
          text: "周区间分布",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.week_bar_xAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.week_bar_data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: { //数值样式
                color: 'oldlace',//字体颜色
                fontSize: 10//字体大小
                }
            }
          }
        ]
      };

      this.week_bar_option && this.week_bar_myChart.setOption(this.week_bar_option);
    },
    // 星期饼图 two
    draw_week_pie() {
      this.week_pie_chartDome = document.getElementById('two');
      this.week_pie_myChart = echarts.init(this.week_pie_chartDome);
      this.week_pie_option;

      this.week_pie_option = {
        title: {
          text: '周区间分布',
          subtext: 'Fake Data',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.week_pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.week_pie_option && this.week_pie_myChart.setOption(this.week_pie_option);
    },
    // 小时柱状图 three
    draw_hour_bar() {
      this.hour_bar_chartDome = document.getElementById('three');
      this.hour_bar_myChart = echarts.init(this.hour_bar_chartDome);

      this.hour_bar_option = {
        title: {
          show: true,
          text: "24小时区间分布",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.hour_bar_xAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.hour_bar_data,
            type: 'line',
            areaStyle: {},
            smooth: true,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: { //数值样式
                color: 'black',//字体颜色
                fontSize: 10//字体大小
                }
            }
          }
        ]
      };

      this.hour_bar_option && this.hour_bar_myChart.setOption(this.hour_bar_option);
    },

    // 小时饼图 two
    draw_hour_pie() {
      this.hour_pie_chartDome = document.getElementById('four');
      this.hour_pie_myChart = echarts.init(this.hour_pie_chartDome);
      this.hour_pie_option;

      this.hour_pie_option = {
        title: {
          text: '24小时区间分布',
          subtext: 'Fake Data',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.hour_pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.hour_pie_option && this.hour_pie_myChart.setOption(this.hour_pie_option);
    },

  }
}
</script>

<style scoped>
.anTimeRank {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}
/* 去除滚动栏，保留滚动效果 */
.anTimeRank::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}
/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#one {
  width: 49%;
  height: 49%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#two {
  width: 49%;
  height: 49%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素     */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#three {
  width: 49%;
  height: 49%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素   */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#four {
  width: 49%;
  height: 49%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素   */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}</style>